<template>
  <div>
    <listPage
    ref="listPageRef"
    pageTitle="物理机"
    :btnList="btnList"
    :addBtnList="addBtnList"
    :tableData="tableData"
    :allColumn="tableColumn"
    :tableColumn="showColumn"
    @setColumn="(val)=>{showColumn=val}"
    ></listPage>
    <!-- 控制台弹窗 -->
    <pdlog v-model="showLog" width="418px" title="远程控制台" BtnTitleL="安装" @comfirm="showLog = false" @cencel="showLog = false">
      <div style="margin:10px 20px;">
        <el-select size="small" v-model="logValue" placeholder="请选择操作系统">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </div>
    </pdlog>
    <!-- 消息弹窗 -->
    <pdlog v-model="showTip" width="418px" :title="tipName" @comfirm="showTip = false" @cencel="showTip = false">
      <div class="btn-msg">
        请确认是否进行{{tipName}}？
      </div>
    </pdlog>
  </div>
</template>

<script>
  import listPage from '@/components/listPage'
  import {getCouPhysical} from '@/api/pageList'

  export default {
    data() {
      return {
        tipName:'',
        showTip:false,
        addBtnList:[{
            id:1,
            name:'申请物理机',
            handle:this.handleAdd
          }],
        btnList:[
        {
            id:1,
            name:'开机',
            handle:()=>this.handleClick('开机')
          },
          {
            id:2,
            name:'关机',
            handle:()=>this.handleClick('关机')
          },
          {
            id:3,
            name:'强制关机',
            handle:()=>this.handleClick('关机')
          },
          {
            id:4,
            name:'重启',
            handle:()=>this.handleClick('重启')
          },
          {
            id:5,
            name:'强制重启',
            handle:()=>this.handleClick('重启')
          },
          {
            id:6,
            name:'释放',
            handle:()=>this.handleClick('释放')
          },
          {
            id:7,
            name:'导出',
            handle:()=>this.handleClick('导出')
          },
        ],
        options: [
          {label:'CentOS',value:'CentOS'}
          
        ],
        showLog: false, // 控制台弹窗
        logValue: null, // 控制台值
        showColumn: [], // 展示列
        tableColumn: [{
            field: "name",
            label: "名称",
          },
          {
            field: "id",
            label: "ID",
          },
          {
            field: "ava_part",
            label: "可用区",
            sortable: true

          },
          {
            field: "status",
            label: "状态",
            isStatus: true,
            format:(val)=>{
              return {
                1:'注册中',
                2:'运行中',
                3:'释放中',
                4:'以释放',
                5:'正在开机'
              }[val]
            }
          },
          {
            field: "norm",
            label: "规格",
            sortable: true
          },
          {
            field: "image",
            label: "镜像",
            sortable: true
          },
          {
            field: "ip",
            label: "地址",
            sortable: true
          },
          {
            field: "operation",
            type: "handler",
            label: "操作",
            btnlist: [{
                name: '远程控制台',
                handle: this.handleLog
              },
            ]
          },
        ],
        tableData: [],
      }
    },
    components: {
      listPage
    },
    created() {
      this.init()
    },
    methods: {
      init(){
        this.showColumn = this.tableColumn
        this.getData()
      },
      getData(params={}){
        // console.log('~~~~~~~~~',params)
        // 请求
        getCouPhysical()
          .then(res => {
            if(res.code==200){
              let data = JSON.parse(res.data)
              this.tableData = data
              console.log('~~~~~~',this.tableData);
            }
          })
      },
      handleAdd() {
        console.log(this.$router);
        this.$router.push({
          path: '/computsuc/physicalAdd'
        })
      },
      selectedData(){
        return this.$refs.listPageRef.getSelectedData()
      },
      handleClick(name) {
        this.tipName = name
        // 获取选中数据
        let selectRow = this.selectedData()
        console.log('@@@@@@',)
        this.showTip = true

        // this.$axios.get('http://47.95.194.212:6601/api/physical').then(res=>{
        //   console.log('@@@@@',res)
        // })
      },
      handleccc() {
        console.log('6666666666666');
      },
      setTable() {
        this.$refs.settingTable.init()
      },
      handleLog(index, row) {
        console.log(index, row);
        this.showLog = true
      },
      handleEdit(index, row) {
        console.log(index, row);
        this.showEdit = true
      },
      handleDetail(index, row) {
        console.log(index, row);
      },
    }
  }
</script>

<style scoped lang="less">
  .edit-dialog {
    margin: 0px 20px 10px;
    display: flex;
    align-items: center;
    .name {
      font-weight: 650;
      font-size: 16px;
      color: rgba(0, 0, 0, 0.847058823529412);
      margin-right: 35px;
    }
    .el-input {
      width: 233px;
    }
  }
</style>
